@use "sass:map";
@use "sass:math";
@import '../../theme/common/var.scss';
@import '../../theme/common/mixin.scss';
[class*="wu-col-"] {
    float: left;
    box-sizing: border-box;
}
:host{
    display: contents;
}
::slotted {
    width: 100%;
}
.wu-col-0 {
    display: none;
}

@for $i from 0 through 24 {
    .wu-col-#{$i} {
        width: (math.div(1, 24) * $i * 100) * 1%;
    }

    .wu-col-offset-#{$i} {
        margin-left: (math.div(1, 24) * $i * 100) * 1%;
    }

    .wu-col-pull-#{$i} {
        position: relative;
        right: (math.div(1, 24) * $i * 100) * 1%;
    }

    .wu-col-push-#{$i} {
        position: relative;
        left: (math.div(1, 24) * $i * 100) * 1%;
    }
}

@include res(xs) {
    .wu-col-xs-0 {
        display: none;
    }
    @for $i from 0 through 24 {
        .wu-col-xs-#{$i} {
            width: (math.div(1, 24) * $i * 100) * 1%;
        }

        .wu-col-xs-offset-#{$i} {
            margin-left: (math.div(1, 24) * $i * 100) * 1%;
        }

        .wu-col-xs-pull-#{$i} {
            position: relative;
            right: (math.div(1, 24) * $i * 100) * 1%;
        }

        .wu-col-xs-push-#{$i} {
            position: relative;
            left: (math.div(1, 24) * $i * 100) * 1%;
        }
    }
}

@include res(sm) {
    .wu-col-sm-0 {
        display: none;
    }
    @for $i from 0 through 24 {
        .wu-col-sm-#{$i} {
            width: (math.div(1, 24) * $i * 100) * 1%;
        }

        .wu-col-sm-offset-#{$i} {
            margin-left: (math.div(1, 24) * $i * 100) * 1%;
        }

        .wu-col-sm-pull-#{$i} {
            position: relative;
            right: (math.div(1, 24) * $i * 100) * 1%;
        }

        .wu-col-sm-push-#{$i} {
            position: relative;
            left: (math.div(1, 24) * $i * 100) * 1%;
        }
    }
}

@include res(md) {
    .wu-col-md-0 {
        display: none;
    }
    @for $i from 0 through 24 {
        .wu-col-md-#{$i} {
            width: (math.div(1, 24) * $i * 100) * 1%;
        }

        .wu-col-md-offset-#{$i} {
            margin-left: (math.div(1, 24) * $i * 100) * 1%;
        }

        .wu-col-md-pull-#{$i} {
            position: relative;
            right: (math.div(1, 24) * $i * 100) * 1%;
        }

        .wu-col-md-push-#{$i} {
            position: relative;
            left: (math.div(1, 24) * $i * 100) * 1%;
        }
    }
}

@include res(lg) {
    .wu-col-lg-0 {
        display: none;
    }
    @for $i from 0 through 24 {
        .wu-col-lg-#{$i} {
            width: (math.div(1, 24) * $i * 100) * 1%;
        }

        .wu-col-lg-offset-#{$i} {
            margin-left: (math.div(1, 24) * $i * 100) * 1%;
        }

        .wu-col-lg-pull-#{$i} {
            position: relative;
            right: (math.div(1, 24) * $i * 100) * 1%;
        }

        .wu-col-lg-push-#{$i} {
            position: relative;
            left: (math.div(1, 24) * $i * 100) * 1%;
        }
    }
}

@include res(xl) {
    .wu-col-xl-0 {
        display: none;
    }
    @for $i from 0 through 24 {
        .wu-col-xl-#{$i} {
            width: (math.div(1, 24) * $i * 100) * 1%;
        }

        .wu-col-xl-offset-#{$i} {
            margin-left: (math.div(1, 24) * $i * 100) * 1%;
        }

        .wu-col-xl-pull-#{$i} {
            position: relative;
            right: (math.div(1, 24) * $i * 100) * 1%;
        }

        .wu-col-xl-push-#{$i} {
            position: relative;
            left: (math.div(1, 24) * $i * 100) * 1%;
        }
    }
}
